<!DOCTYPE html>
<html lang = "en">
<head>
    <meta charset = "UTF-8">
    <title>Title</title>

    <style>
        .box{
            background: red;
        }
    </style>
</head>
<body>

<!--=====================================================================-->
<!-- 样式的优先级: * < 标签 < class < id < 行间 -->
<input type="button" value="变红" onclick="toRed()">  <!-- 本质是将class=box添加给标签-->
<input type="button" value="变绿" onclick="toGreen()">    <!--是真的修改了行间属性-->
<div id="div-3" style="height: 100px;width: 100px;"></div>
<script>
    function toRed() {
        let oDiv = document.getElementById('div-3');
        // oDiv.style.background = 'red';
        oDiv.className='box';
    }
    function toGreen() {
        let oDiv = document.getElementById('div-3');
        oDiv.style.background = 'green';
    }
</script>
<!-- 结果:先修改box可以使div变红,但先修改行间属性后则不可,因为行间属性优先级大于class-->
<hr>


</body>
</html>